<template>
    <div class="flex flex-wrap">
        <sidebar />
        <div class="p-8">
            <h2 class="font-bold my-4">形象选择</h2>
            <div class="grid grid-cols-3 gap-2">
                <div class="relative w-24 h-24 overflow-hidden rounded-lg cursor-pointer"
                    v-for="(item, index) in section1" :key="index" @click="chooseAvatar(index)"
                    :class="styleIndex == index ? 'border-4 border-blue-500' : ''">
                    <img class=" w-24 h-24 " :src="item.image" />
                    <!-- <div class="absolute bottom-0 bg-gray-500 w-full z-10 text-center text-white">{{ item.title }}</div> -->
                </div>
            </div>
            <div class="flex justify-between items-center">
                <h2 class="font-bold my-4">台词输入</h2>
                <div class="cursor-pointer text-sm" @click="tryPrompt">试试手气</div>
            </div>
            <el-input v-model="input" placeholder="请输入创意描述" :rows="7" type="textarea"></el-input>
            <el-button class="my-4 w-full" type="primary" @click="confirm">立即生成</el-button>




        </div>

        <div id="outputbox" class="bg-gray-100 p-16 flex-1 ">
            <div v-if="output.length > 0" class="w-full">
                <video controls>
                    <source :src="output" type="video/mp4" />
                    <source :src="output" type="video/ogg">
                    您的浏览器不支持 HTML5 video 标签。
                </video>
            </div>
            <div v-else
                class=" rounded-lg flex flex-col items-center justify-center items-center h-48 md:h-96">
                <img class="w-full" :src="section1[styleIndex].bg" />
                <!-- <div class="font-bold">灵感绘图 🎉</div> -->
                <!-- <div class="text-slate-500">快去左侧输入你的灵感创意吧~</div> -->
            </div>

        </div>


    </div>
</template>
<script setup>
useSeoMeta({
    title: 'AI绘图工具_AI做图神器_AI图像处理 | 创意无限，绘图轻松',
    ogTitle: 'AI绘图工具_AI做图神器_AI图像处理 | 创意无限，绘图轻松',
    description: '明志智图AI绘图工具是一款智能化的绘图工具，提供了各种功能和工具，帮助您快速创作出各种高质量的图形和图像。无论是进行创意设计、创意制作，还是对图片进行处理和优化，明志智图AI都提供了最佳的解决方案。',
    ogDescription: '明志智图AI绘图工具是一款智能化的绘图工具，提供了各种功能和工具，帮助您快速创作出各种高质量的图形和图像。无论是进行创意设计、创意制作，还是对图片进行处理和优化，明志智图AI都提供了最佳的解决方案。',
    ogImage: 'https://cdn.mzyun.tech/logo_black.png',
    keywords:"AI绘图工具,AI图像处理,AI做图,AI绘画,AI绘画工具,AI绘画软件,AI绘画网站,明志科技,明志"
})
const section1 = ref([{
    image: "https://alioss-cdn.mzyun.tech/55ai/human/harry-business-thumbnail.png",
    bg: "https://alioss-cdn.mzyun.tech/55ai/human/harry-business-transparent.png",
    character: "Harry",
    style: "business",
    gender:'male'
}, {
    image: "https://alioss-cdn.mzyun.tech/55ai/human/lori-graceful-thumbnail.png",
    bg: "https://alioss-cdn.mzyun.tech/55ai/human/lori-graceful-transparent.png",
    character: "Lori",
    style: "graceful",
    gender:'female'
}, {
    image: "https://alioss-cdn.mzyun.tech/55ai/human/harry-casual-thumbnail.png",
    bg: "https://alioss-cdn.mzyun.tech/55ai/human/harry-casual-transparent.png",
    character: "Harry",
    style: "casual",
    gender:'male'
}, {
    image: "https://alioss-cdn.mzyun.tech/55ai/human/harry-youthful-thumbnail.png",
    bg: "https://alioss-cdn.mzyun.tech/55ai/human/harry-youthful-transparent.png",
    character: "Harry",
    style: "youthful",
    gender:'male'
}, {
    image: "https://alioss-cdn.mzyun.tech/55ai/human/jeff-business-thumbnail.png",
    bg: "https://alioss-cdn.mzyun.tech/55ai/human/jeff-business-transparent.png",
    character: "Jeff",
    style: "business",
    gender:'male'
}, {
    image: "https://alioss-cdn.mzyun.tech/55ai/human/jeff-formal-thumbnail.png",
    bg: "https://alioss-cdn.mzyun.tech/55ai/human/jeff-formal-transparent.png",
    character: "Jeff",
    style: "Formal",
    gender:'male'
}, {
    image: "https://alioss-cdn.mzyun.tech/55ai/human/lisa-casual-sitting-thumbnail.png",
    bg: "https://alioss-cdn.mzyun.tech/55ai/human/lisa-casual-sitting-transparent.png",
    character: "Lisa",
    style: "casual-sitting",
    gender:'female'
}])
const bg = ref("https://alioss-cdn.mzyun.tech/55ai/human/harry-business-transparent.png")
const styleIndex = ref(0)
const prompts = ["我是明志科技虚拟数字人小西，在这里输入您要播报的内容，就可以生成口播内容", "明志科技虚拟人提供形象定制，声音定制服务，如果需定制，请直接联系我们。"]
const input = ref("")
const output = ref('')
const chooseAvatar = (index) => {
    output.value=''
    styleIndex.value = index

}
const tryPrompt = () => {
    let index = Math.floor(Math.random() * prompts.length)
    input.value = prompts[index]
}

const store = useUserStore();
const showLogin=inject("showLogin")
const confirm = async () => {
    if(!store.isLogin){
        showLogin.value=true
        return false;
    }
    if (!input.value) {
        ElMessage.error('口播台词不能为空')
        return false;
    }
    let current = section1.value[styleIndex.value]
    const data = { content: input.value,character:current.character, style: current.style ,gender:current.gender}
  
    const loadingInstance = ElLoading.service({
        lock: false,
        target:'#outputbox',
        text: '正在生成中...',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    const { data: res } = await usePost("/api/azure/add", data)
    const task_id = res.value.data.id
    let timer = setInterval(async () => {
        const { data: res2 } = await useGet("/api/azure/status?id=" + task_id)
        let task_status=res2.value.data.status
        if (task_status == "Succeeded") {
            clearInterval(timer)
            loadingInstance.close()
            output.value = res2.value.data.outputs.result
        }
        if (task_status == "Failed") {
            clearInterval(timer)
            loadingInstance.close()
            ElMessage.error("视频生成失败")
        }


    }, 1000);




}
</script>